<template>
  <div id="app"></div>
</template>

<script>
import { asyncInquireusertotpdataid } from "../plugins/api.js";
import { GetQueryString } from "../plugins/utils";

export default {
  name: "Home",
  async created() {
    this.start();
  },
  methods: {
    async start() {
      const ID = GetQueryString("ID");
      try {
        const { video, data } = await asyncInquireusertotpdataid({
          tpdata_ID: ID
        });
        const { name } = data;
        const { PlayInfoList, VideoBase } = video;
        const { CoverURL, VideoId } = VideoBase;
        const { PlayInfo } = PlayInfoList;
        const source = PlayInfo[0].PlayURL;
        document.title = name;
        this.play(source, CoverURL, VideoId);
      } catch (err) {
        console.log(err);
      }
    },
    play(source, CoverURL, VideoId) {
      this.player = new window.Aliplayer({
        id: "app",
        autoplay: false,
        isLive: false,
        cover: CoverURL,
        useH5Prism: false,
        useFlashPrism: false,
        defaultDefinition: "HD",
        height: "100vh",
        vid: VideoId,
        source,
        format: "mp4"
      });
      this.player.on("ready", () => {
        const video = document.querySelector("video");
        video.addEventListener("click", () => {
          const btn = document.querySelector(".prism-big-play-btn").style
            .display;
          if (btn !== "none") {
            document.querySelector(".prism-big-play-btn").style.display =
              "none";
            this.player.play();
          } else {
            document.querySelector(".prism-big-play-btn").style.display =
              "block";
            this.player.pause();
          }
        });
      });
      window.addEventListener("keydown", e => {
        if (e.keyCode == 32) {
          const btn = document.querySelector(".prism-big-play-btn").style
            .display;
          if (btn !== "none") {
            document.querySelector(".prism-big-play-btn").style.display =
              "none";
            this.player.play();
          } else {
            document.querySelector(".prism-big-play-btn").style.display =
              "block";
            this.player.pause();
          }
        }
      });
    }
  }
};
</script>

<style>
.prism-big-play-btn {
  left: 50% !important;
  top: 50% !important;
}

</style>

